import React, { useState } from 'react'
import { clsx } from 'clsx'
import { Button } from './Button'
import { BrainIcon, SearchIcon, BookOpenIcon, PenToolIcon, ImageIcon, ChevronRightIcon } from './Icon'

interface OnboardingStep {
  id: string
  title: string
  description: string
  icon: React.ComponentType<any>
  features: string[]
}

const onboardingSteps: OnboardingStep[] = [
  {
    id: 'welcome',
    title: '欢迎使用 MindMate',
    description: '您的AI学习伙伴，提供智能对话、搜索、阅读和创作功能',
    icon: BrainIcon,
    features: [
      '智能对话交流',
      '实时信息搜索', 
      '文档智能解读',
      '创意内容生成'
    ]
  },
  {
    id: 'models',
    title: '选择AI模型',
    description: '根据不同任务选择最合适的AI模型',
    icon: BrainIcon,
    features: [
      'GPT-4：复杂推理和创意写作',
      'GPT-3.5：日常对话和快速响应',
      'Claude-3：深度分析和文档理解',
      '随时可以切换模型'
    ]
  },
  {
    id: 'functions',
    title: '核心功能介绍',
    description: '四大核心功能，满足您的不同需求',
    icon: SearchIcon,
    features: [
      'AI搜索：获取最新信息',
      'AI阅读：智能文档解析',
      'AI写作：创作优质内容',
      'AI图画：生成创意图像'
    ]
  },
  {
    id: 'tips',
    title: '使用小贴士',
    description: '掌握这些技巧，让AI助手发挥最大价值',
    icon: PenToolIcon,
    features: [
      '描述详细需求获得更好回答',
      '使用功能按钮快速开始',
      '尝试不同模型比较效果',
      '保存重要对话到会话列表'
    ]
  }
]

interface OnboardingProps {
  onComplete: () => void
  onSkip: () => void
}

export const Onboarding: React.FC<OnboardingProps> = ({ onComplete, onSkip }) => {
  const [currentStep, setCurrentStep] = useState(0)
  const step = onboardingSteps[currentStep]

  const nextStep = () => {
    if (currentStep < onboardingSteps.length - 1) {
      setCurrentStep(currentStep + 1)
    } else {
      onComplete()
    }
  }

  const prevStep = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

  const IconComponent = step.icon

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
        {/* 头部 */}
        <div className="p-6 border-b border-neutral-200">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="p-2 bg-accent-100 rounded-xl">
                <IconComponent size="lg" className="text-accent-600" />
              </div>
              <div>
                <h2 className="text-xl font-bold text-neutral-900">{step.title}</h2>
                <p className="text-sm text-neutral-500">
                  第 {currentStep + 1} 步，共 {onboardingSteps.length} 步
                </p>
              </div>
            </div>
            <button
              onClick={onSkip}
              className="text-neutral-400 hover:text-neutral-600 transition-colors"
            >
              跳过
            </button>
          </div>
        </div>

        {/* 内容 */}
        <div className="p-6">
          <p className="text-neutral-700 mb-6 leading-relaxed">
            {step.description}
          </p>

          <div className="space-y-3 mb-8">
            {step.features.map((feature, index) => (
              <div
                key={index}
                className="flex items-start space-x-3 p-3 bg-neutral-50 rounded-lg"
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <div className="flex-shrink-0 mt-0.5">
                  <div className="w-2 h-2 bg-accent-500 rounded-full"></div>
                </div>
                <span className="text-sm text-neutral-700">{feature}</span>
              </div>
            ))}
          </div>

          {/* 进度指示器 */}
          <div className="flex items-center justify-center space-x-2 mb-6">
            {onboardingSteps.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentStep(index)}
                className={clsx(
                  'w-3 h-3 rounded-full transition-all duration-200',
                  index === currentStep
                    ? 'bg-accent-500 scale-110'
                    : index < currentStep
                    ? 'bg-accent-300'
                    : 'bg-neutral-200'
                )}
              />
            ))}
          </div>
        </div>

        {/* 底部操作 */}
        <div className="px-6 py-4 border-t border-neutral-200 bg-neutral-50 rounded-b-2xl">
          <div className="flex items-center justify-between">
            <Button
              onClick={prevStep}
              variant="ghost"
              disabled={currentStep === 0}
              className="text-neutral-600"
            >
              上一步
            </Button>
            
            <Button
              onClick={nextStep}
              variant="accent"
              rightIcon={<ChevronRightIcon size="sm" />}
            >
              {currentStep === onboardingSteps.length - 1 ? '开始使用' : '下一步'}
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

// 空状态组件
interface EmptyStateProps {
  icon?: React.ComponentType<any>
  title: string
  description: string
  action?: {
    label: string
    onClick: () => void
  }
  className?: string
}

export const EmptyState: React.FC<EmptyStateProps> = ({
  icon: Icon = BrainIcon,
  title,
  description,
  action,
  className = ''
}) => (
  <div className={clsx('text-center py-12', className)}>
    <div className="w-20 h-20 mx-auto mb-4 bg-neutral-100 rounded-full flex items-center justify-center">
      <Icon size="xl" className="text-neutral-400" />
    </div>
    <h3 className="text-lg font-semibold text-neutral-900 mb-2">{title}</h3>
    <p className="text-neutral-600 mb-6 max-w-sm mx-auto leading-relaxed">
      {description}
    </p>
    {action && (
      <Button onClick={action.onClick} variant="accent">
        {action.label}
      </Button>
    )}
  </div>
)

// 会话空状态
export const EmptySessionState: React.FC<{ onCreateSession: () => void }> = ({ onCreateSession }) => (
  <EmptyState
    icon={BrainIcon}
    title="开始您的AI对话"
    description="创建新对话，与AI助手智能交流，探索无限可能"
    action={{
      label: '创建新对话',
      onClick: onCreateSession
    }}
  />
)

// 搜索空状态
export const EmptySearchState: React.FC<{ searchTerm: string; onClearSearch: () => void }> = ({ 
  searchTerm, 
  onClearSearch 
}) => (
  <EmptyState
    icon={SearchIcon}
    title="未找到匹配结果"
    description={`没有找到包含 "${searchTerm}" 的会话，尝试调整搜索关键词`}
    action={{
      label: '清除搜索',
      onClick: onClearSearch
    }}
  />
)

// 功能介绍卡片
export const FeatureCard: React.FC<{
  icon: React.ComponentType<any>
  title: string
  description: string
  onClick: () => void
  className?: string
}> = ({ icon: Icon, title, description, onClick, className = '' }) => (
  <button
    onClick={onClick}
    className={clsx(
      'w-full p-4 bg-white border border-neutral-200 rounded-xl shadow-sm',
      'hover:shadow-md hover:border-accent-200 focus:outline-none focus:ring-2 focus:ring-accent-500',
      'transform transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]',
      'text-left group',
      className
    )}
  >
    <div className="flex items-start space-x-3">
      <div className="p-2 bg-accent-100 rounded-lg group-hover:bg-accent-200 transition-colors">
        <Icon size="md" className="text-accent-600" />
      </div>
      <div className="flex-1 min-w-0">
        <h4 className="font-semibold text-neutral-900 text-sm mb-1">{title}</h4>
        <p className="text-xs text-neutral-600 leading-relaxed">{description}</p>
      </div>
    </div>
  </button>
)